<script setup>
</script>

<template>
  <div class="main">
    <div class="header">
      <div class="top">
        <img src="@/assets/logo2.png" alt="">
        <ul>
          <li>关于创智成</li>
          <li>加固产品及方案</li>
          <li>信创笔记本产品几方案</li>
          <li>AI算智产品几方案</li>
          <li>
            <img class="icon" src="@/assets/sousuo.png" alt="">搜索
          </li>
          <li>中文<img class="icon2" src="@/assets/xiala2.png" alt=""></li>
        </ul>
      </div>
      <div class="text">
        <div class="h2">世界级行业应用方案提供商</div>
        <div class="p">Market Leader in Vertical System Solution</div>
        <div class="more">MORE</div>
      </div>
    </div>
    <div class="center">
      <div class="text">
        <div class="left">
          国产自主可控产业化的排头兵
          <span style="font-size: 30px;margin: 0 10px;color: #666666"> / </span>
          <span> 世界级行业解决方案</span>
        </div>
        <div class="all">
          查看全部
          <img src="@/assets/hhh.png" alt="">
        </div>
      </div>
      <div class="container">
        <div class="img1">
          <img style="width: 100%;" src="@/assets/xp.png" alt="">
          <div class="bg"><span>基于龙芯3A3000处理器 6U尺寸CPCI计算机模块</span></div>
        </div>
        <div class="img2">
          <img style="width: 100%;" src="@/assets/ys.png" alt="">
          <div class="bg"><span>完善的测试流程、测试设备和测试标准完善的测试流程、测试设备和测试标准...</span></div>
        </div>
        <div class="img3">
          <img style="width: 100%;" src="@/assets/jxb.png" alt="">
          <div class="bg"><span>基于龙芯3A3000处理器 6U尺寸CPCI计算机模块</span></div>
        </div>
        <div class="img4">
          <img style="width: 100%;height: 100%;" src="@/assets/cs.png" alt="">
          <div class="bg">
            <span class="about">关于创智成</span>
            <span>基于龙芯3A3000处理器 6U尺寸CPCI计算机模块6U尺寸CPCI计算机模块6U尺寸CPCI计算机模块6U尺寸CPCI计算机模块</span>
            <span class="all">
              查看全部
              <img src="@/assets/hhh.png" alt="">
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="industry">
      <div class="main">
        <div class="text">
          <div class="left">
            业务领域
            <span style="font-size: 30px;margin: 0 10px;color: #666666"> / </span>
            <span> 以用户为中心，围绕生活的每个场景</span>
          </div>
        </div>
        <div class="content">
          <div class="left">
            <img class="xian" src="@/assets/xian.png" alt="">
            <div class="yuan">
              <img src="@/assets/qian.png" alt="">
            </div>
            <div class="yuan yuan1">
              <img src="@/assets/qian.png" alt="">
            </div>
            <div class="yuan yuan2">
              <img src="@/assets/qian.png" alt="">
            </div>
            <div class="yuan yuan3">
              <img src="@/assets/qian.png" alt="">
            </div>
            <div class="yuan yuan4">
              <img src="@/assets/qian.png" alt="">
            </div>
          </div>
          <div class="center">
            <div class="title">无人送餐车</div>
            <div class="desc">
              慢速场景的无人驾驶可支持场景：园区配送小车、餐饮门店、宾旅馆配送机器人智能清扫车、智能制造、元器件配送机器人、智能医院-自动药品配送慢速场景的无人驾驶可支持场景：园区配送小车、餐饮门店、宾旅馆配送机器人智能清扫车、智能制造、元器件配送机器人、智能医院-自动药品配送
            </div>
            <div class="photo">
              <div class="dian">
                <div class="kb1">
                  <img src="@/assets/kb1.png" alt="">
                </div>
                <div class="kb2">
                  <img src="@/assets/kb2.png" alt="">
                </div>
              </div>

            </div>
          </div>
          <div class="right">
            <img src="@/assets/car.png" alt="">
          </div>
        </div>
        <div class="text text2">
          <div class="left">
            合作生态伙伴
            <span style="font-size: 30px;margin: 0 10px;color: #666666"> / </span>
            <span> 我们一起，走得更远</span>
          </div>
          <div class="change">
            <ul>
              <li>全部</li>
              <li>军工</li>
              <li>教育</li>
              <li>金融</li>
              <li>商场</li>
              <li>公司</li>
            </ul>
          </div>
        </div>
        <div class="list">
          <div v-for="(v, i) in 10" :key="i" class="yuan">
            <div class="item">
              <img src="@/assets/cetc.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="news">
      <div class="text">
        <div class="left">
          新闻动态
          <span style="font-size: 30px;margin: 0 10px;color: #666666"> / </span>
          <span> 记录AI改变世界的瞬间</span>
        </div>
        <div class="all">
          查看全部
          <img src="@/assets/hhh.png" alt="">
        </div>
      </div>
      <div class="newslist">
        <div class="item">
          <div class="date">02/23</div>
          <div class="title">四路256核心！国产龙芯CPU服务器上新：真正的自主架构</div>
          <div class="desc">
            该服务器在4U高度里最大支持5个PCle插槽位，前窗支持12个3.5/2.5寸硬盘盘位，具有高性能计算、大容量存储、低能耗、易管理等优点，侧重于多CPU、大内存的服务器应用场景。它主要面向大数据、云计算、分布式存储、互联网、中小企业等领域，可满足各个不同行业应用需求。
          </div>
        </div>
        <div class="item">
          <div class="date">02/23</div>
          <div class="title">四路256核心！国产龙芯CPU服务器上新：真正的自主架构</div>
          <div class="desc">
            该服务器在4U高度里最大支持5个PCle插槽位，前窗支持12个3.5/2.5寸硬盘盘位，具有高性能计算、大容量存储、低能耗、易管理等优点，侧重于多CPU、大内存的服务器应用场景。它主要面向大数据、云计算、分布式存储、互联网、中小企业等领域，可满足各个不同行业应用需求。
          </div>
        </div>
      </div>
      <div class="jiagou">
        <div class="left">
          <div class="date">02/23</div>
          <div class="item">
            <div class="title">四路256核心！国产龙芯CPU服务器上新：真正的自主架构</div>
            <div class="desc">
              该服务器在4U高度里最大支持5个PCle插槽位，前窗支持12个3.5/2.5寸硬盘盘位，具有高性能计算、大容量存储、低能耗、易管理等优点，侧重于多CPU、大内存的服务器应用场景。它主要面向大数据、云计算、分布式存储、互联网、中小企业等领域，可满足各个不同行业应用需求。
            </div>
          </div>
        </div>
        <div class="right">
          <img src="@/assets/mb.png" alt="">
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="top">
        <img src="@/assets/logo2.png" alt="">
        <div class="fangan">
          <ul class="ul">
            <li>
              <ol>关于创智成</ol>
              <ol>公司介绍</ol>
              <ol>核心技术</ol>
              <ol>公司动态</ol>
            </li>
            <li>
              <ol>加固产品及方案 </ol>
              <ol>加固笔记本</ol>
              <ol>加固平板手持机</ol>
              <ol>加固板卡</ol>
              <ol>加固显控终端</ol>
              <ol>加固服务器</ol>
              <ol>联系我们</ol>
            </li>
            <li>
              <ol>信创笔记本产品及方案</ol>
              <ol>双屏笔记本</ol>
              <ol>信创笔记本</ol>
              <ol>技术支持</ol>
              <ol>联系我们</ol>
            </li>
            <li>
              <ol>AI智算产品及方案</ol>
              <ol>产品中心</ol>
              <ol>行业应用</ol>
              <ol>服务支持</ol>
              <ol>合作发展</ol>
              <ol>最新资讯</ol>
              <ol>联系我们</ol>
            </li>
          </ul>
        </div>
        <div class="info">
          <div class="one">
            <img src="@/assets/phone2.png" alt="">
            <span>158-146-82713</span>
          </div>
          <div class="two">
            <img src="@/assets/phone2.png" alt="">
            <span>sudl@czctech.com</span>
          </div>
          <div class="three">
            <img src="@/assets/address.png" alt="">
            <span>深圳市宝安区新安街道留仙三路长丰工业园F2A座1-2楼</span>
          </div>
          <img class="ewm" src="@/assets/ewm.png" alt="">
        </div>
      </div>
      <hr class="hr">
      <div class="text">版权所有Copyright © 2020 深圳市创智成科技股份有限公司</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
/* src/index.css */
@media screen and (max-width: 1280px) {

  /* 隐藏横轴 */
  body {
    margin-left: 0;
    margin-right: 0;
  }
}

.main {
  width: 100%;

  .header {
    width: 100%;
    height: 923px;
    background: url(@/assets/home.png) no-repeat;
    background-size: 100% 100%;
    position: relative;

    .top {
      height: 60px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      img {
        height: 30px;
        margin-left: 70px;
        margin-top: 10px;
      }

      ul {
        margin-top: 10px;
        margin-right: 50px;
        display: flex;
        color: #FFFFFF;
        font-size: 17px;

        li {
          display: flex;
          flex-direction: row;
          align-items: center;

          .icon {
            margin: 5px;
            width: 19px;
            height: 19px;
          }

          .icon2 {
            margin: 5px;
            height: 5px;
          }

          margin: 10px 20px;
          cursor: pointer;
        }
      }
    }

    .text {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      width: 600px;
      position: absolute;
      top: 45%;
      left: 20%;

      .h2 {
        text-align: justify;
        font-size: 39px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 49px;

        &::after {
          display: inline-block;
          content: "";
        }
      }

      .p {
        text-align: justify;
        width: 100%;
        height: 14px;
        font-size: 12px;
        font-family: Roboto-Light, Roboto;
        font-weight: 300;
        color: #FFFFFF;
        line-height: 30px;
      }

      .more {
        width: 185px;
        height: 54px;
        background: #ED6B00;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 54px;
        margin-top: 30px;
        text-align: center;
        cursor: pointer;
      }
    }
  }

  // 国产自主可控产业化的排头兵
  .center {
    width: 93%;
    margin: 0 auto;
    background: #FFFFFF;

    .text {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .left {
        margin: 80px 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 42px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #111111;

        span {
          font-size: 18px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #111111;
        }
      }

      .all {
        margin: 80px 0;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #999999;

        img {
          width: 17px;
        }
      }
    }

    .container {
      height: 687px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px 10px;
      grid-auto-flow: row;
      grid-template-areas:
        "img1 img1 img4 img4"
        "img2 img3 img4 img4";
    }

    .img1 {
      grid-area: img1;
      position: relative;

      .bg {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background-color: rgba(3, 3, 3, 0.4);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        span {
          margin: 20px 30px;
          font-size: 18px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 36px;
        }
      }
    }

    .img2 {
      grid-area: img2;
      position: relative;

      .bg {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background-color: rgba(3, 3, 3, 0.4);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        span {
          margin: 20px 30px;
          font-size: 18px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 36px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .img3 {
      grid-area: img3;
      position: relative;

      .bg {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background-color: rgba(3, 3, 3, 0.4);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        span {
          margin: 20px 30px;
          font-size: 18px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 36px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .img4 {
      grid-area: img4;
      position: relative;

      .bg {
        width: 100%;
        height: 158px;
        bottom: 0;
        left: 0;
        position: absolute;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(12, 22, 33, 0.49) 100%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        .about {
          margin: 10px 30px;
          font-size: 42px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 54px;
        }

        span {
          margin: 0 30px 10px;
          font-size: 18px;
          font-family: Microsoft YaHei-Regular,
            Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 36px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .all {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          display: flex;
          flex-direction: row;
          align-items: center;

          img {
            width: 17px;
            margin: 0 5px;
          }
        }
      }
    }
  }

  // 业务领域
  .industry {
    margin-top: 50px;
    width: 100%;
    padding-bottom: 120px;
    background: #F5F7F9;

    .main {
      width: 80%;
      margin: 0 auto;

      .text {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .left {
          margin: 80px 0;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          font-size: 42px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #111111;

          span {
            font-size: 18px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #111111;
          }
        }
      }

      .text2 {
        margin: 50px 0;

        .change {
          ul {
            display: flex;
            flex-direction: row;

            li {
              margin: 10px;
              font-size: 16px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #111111;
              padding: 12px 30px;
              background: #FFFFFF;

              &:first-child {
                color: #ED6B00;
                border: 1px solid #ED6B00;
              }
            }
          }

        }
      }

      .content {
        background: #F5F7F9;
        display: flex;
        flex-direction: row;
        width: 100%;

        .left {
          height: 555px;
          flex: 1;
          position: relative;

          .xian {
            position: absolute;
            left: 40px;
            top: 40px;
            height: 455px;
            z-index: 10;
          }

          .yuan {
            margin: 0 30px 30px 0;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #FFFFFF;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            position: relative;

            &::before {
              content: "智慧工厂";
              position: absolute;
              left: 110%;
              width: 100px;
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #ED6B00;
            }


            img {
              width: 28px;
              height: 28px;
            }
          }

          .yuan1 {
            &::before {
              content: "智慧工厂";
              color: #999999;
            }
          }

          .yuan2 {
            &::before {
              content: "智慧医疗";
              color: #999999;
            }
          }

          .yuan3 {
            &::before {
              content: "数字金融";
              color: #999999;
            }
          }

          .yuan4 {
            &::before {
              content: "AI创作";
              color: #999999;
            }
          }
        }

        .center {
          background: #F5F7F9;
          flex: 2;
          padding: 0 40px;

          .title {
            font-size: 30px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            margin: 30px;
          }

          .desc {
            margin: 30px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 16px;
            font-family: Microsoft YaHei-Light, Microsoft YaHei;
            font-weight: 300;
            color: #000000;
            line-height: 24px;
          }

          .dian {
            width: 90%;
            height: 210px;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            background: url(@/assets/dian.png) no-repeat;
            background-size: 100% 100%;
          }

          .kb1 {
            margin: 10px;
            width: 55px;
            height: 55px;
            background: #FFFFFF;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            img {
              width: 18px;
              height: 8px;
            }
          }

          .kb2 {
            margin: 10px;
            width: 55px;
            height: 55px;
            background: #ED6B00;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            img {
              width: 18px;
              height: 8px;
            }
          }
        }

        .right {
          flex: 3;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .list {
        display: flex;
        flex-wrap: wrap;

        .yuan {
          width: 15%;
          margin: 30px;

          .item {
            width: 198px;
            height: 198px;
            border-radius: 50%;
            background: #FFFFFF;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            img {
              width: 118px;
              height: 58px;
            }
          }
        }
      }
    }

  }

  // 新闻动态
  .news {
    width: 80%;
    margin: 0 auto;
    background: #FFFFFF;
    margin-bottom: 80px;

    .text {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .left {
        margin: 80px 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 42px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #111111;

        span {
          font-size: 18px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #111111;
        }
      }

      .all {
        margin: 80px 0;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #999999;

        img {
          width: 17px;
        }
      }
    }

    .newslist {
      display: flex;
      flex-direction: row;

      .item {
        flex: 1;
        height: 280px;

        .date {
          width: 130px;
          height: 42px;
          background: #ED6B00;
          font-size: 19px;
          font-family: Roboto-Regular, Roboto;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 42px;
          text-align: center;
        }

        .title {
          width: 72%;
          margin: 30px auto;
          font-size: 22px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #111111;
          line-height: 30px;
        }

        .desc {
          width: 72%;
          margin: 30px auto;
          font-size: 14px;
          font-family: Microsoft YaHei-Light, Microsoft YaHei;
          font-weight: 300;
          color: #111111;
          line-height: 19px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .jiagou {
      width: 100%;
      height: 318px;
      display: flex;
      flex-direction: row;

      .left {
        flex: 1.4;
        background: #ED6B00;

        .date {
          // border: solid #ED6B00 1px;
          width: 130px;
          height: 42px;
          background: #FFFFFF;
          font-size: 19px;
          font-family: Roboto-Regular, Roboto;
          font-weight: 400;
          color: #ED6B00;
          line-height: 42px;
          text-align: center;
        }

        .item {
          width: 90%;
          height: 200px;
          margin: 20px 0 0 0;

          .title {
            width: 72%;
            margin: 50px auto 20px;
            font-size: 22px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 30px;
          }

          .desc {
            width: 72%;
            margin: 30px auto;
            font-size: 14px;
            font-family: Microsoft YaHei-Light, Microsoft YaHei;
            font-weight: 300;
            color: #FFFFFF;
            line-height: 19px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .right {
        flex: 1;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  // 尾部
  .footer {
    width: 100%;
    height: 600px;
    background: linear-gradient(360deg, #191A1E 0%, #3E434D 100%);
    border-radius: 0px 0px 0px 0px;
    // margin-top: 100px;
    position: relative;

    .top {
      position: absolute;
      top: 106px;
      left: 50%;
      transform: translateX(-50%);
      width: 93%;
      height: auto;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;

      img {
        width: 210px;
        height: 32px;
      }

      .fangan {
        flex: 3.5;
        margin: 0 160px;
        padding-right: 50px;
        border-right: 1px solid #707070;

        .ul {
          display: flex;
          flex-direction: row;
          justify-content: space-around;

          li {
            ol {
              font-size: 14px;
              font-family: Microsoft YaHei-Light, Microsoft YaHei;
              font-weight: 300;
              color: #aaaaaa;
              margin: 15px 0;
              cursor: pointer;

              &:first-child {
                color: #FFFFFF;
                margin: 0 0 20px 0;
              }
            }
          }
        }

      }

      .info {
        flex: 1;

        .ewm {
          width: 90px;
          height: 90px;
          margin-top: 20px;
        }

        .one {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;

          img {
            width: 14px;
            height: 16px;
            margin: 5px;
          }

          span {
            font-size: 24px;
            font-family: Haettenschweiler-, Haettenschweiler;
            font-weight: normal;
            color: #FFFFFF;
          }
        }

        .two {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;
          margin: 10px 0;

          img {
            width: 14px;
            height: 16px;
            margin: 5px;
          }

          span {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
          }
        }

        .three {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;
          margin: 15px 0;

          img {
            width: 14px;
            height: 16px;
            margin: 5px;
          }

          span {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 24px;
          }
        }
      }
    }

    .hr {
      position: absolute;
      width: 99.9%;
      bottom: 50px;
      opacity: 0.4;
    }

    .text {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #999999;
    }
  }
}
</style>
